import "./index.scss";
import React, { useState } from "react";
import MainMenu from "@/component/MainMenu/index.tsx";
import { Outlet } from "react-router-dom";

import { Breadcrumb, Layout } from "antd";

const { Content, Footer, Sider } = Layout;

const Home: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="demo-logo-vertical">可放置logo</div>
        <MainMenu />
      </Sider>
      <Layout>
        <header className="header">头部</header>
        <Content>
          <Breadcrumb
            style={{ margin: "16px 0" }}
            items={[{ title: "home" }, { title: "联盟" }]}
          ></Breadcrumb>
          <div className="content">
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          这是底部的内容{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Home;
